<template>
  <div class="main">
    <div class="frWarp" v-loading="loading" :style="'height:' + height">
      <iframe
          id="ifrma"
          ref="frame"
          name="ifrma"
          :src="src"
          frameborder="no"
          style="width: 100%; height: 100%"
          scrolling="auto"
          @load="loadIFrame"
      />
      <div class="showNoData" v-if="showNoData">
        No results to display.
      </div>
    </div>
  </div>

</template>
<script>
  import {isNotEmpty} from "../../utils/validate";

  export default {
    props: {
      src: {
        type: String,
        required: true
      },
      autoHeight: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      src: {
        handler(newVal, oldVal) {
          this.showNoData = !isNotEmpty(newVal)
        },
        immediate: true
      }
    },
    data() {
      return {
        height: document.documentElement.clientHeight - 94.5 + "px;",
        // height: "140px",
        loading: true,
        url: this.src,
        iframeWindow: null,

        messageData: null,
        hasLoad: false,
        showNoData: false,
      };
    },
    mounted: function () {
      this.iframeWindow = this.$refs.frame.contentWindow
      window['contextRefComplete'] = this.contextRefComplete;
      window['contextNoDataHandler'] = this.contextNoDataHandler;
      this.getHeight();
    },
    methods: {
      setLoading(v) {
        this.loading = v
      },
      loadIFrame() {
        this.hasLoad = true
        this.getHeight();
        console.log("iFrame 加载完成")

        // 处理iFrame未加载完成 又发送命令未执行的情况
        if (this.messageData != null) {
          this.sendIFameMsg(this.messageData.key, this.messageData.data)
          this.messageData = null
        }
        this.loading = false
      },
      getHeight() {
        if (this.autoHeight) {
          setTimeout(() => {
            var oIframe = document.getElementById("ifrma")
            let state = {}
            try {
              // console.log(oIframe.contentDocument)
              const bodyDom = oIframe.contentWindow || oIframe.contentDocument.parentWindow;
              state.height = bodyDom.document.body.scrollHeight || bodyDom.document.documentElement.scrollHeight
              // console.log(bodyDom, state.height)
            } catch (e) {
              console.log(e)
            }
            oIframe.style.height = state.height
            this.height = (state.height  + (this.showNoData ? 80 : 0)) + "px"
          }, 100);
        }else {
          const that = this;
          window.onresize = function temp() {
            that.height = document.documentElement.clientHeight - 94.5 + "px;";
          };
        }
      },
      sendIFameMsg(key, data) {
        this.loading = true
        let params = {
          type: key,
          data: data
        }
        if (this.hasLoad) {
          this.iframeWindow.postMessage(params)
        }else {
          this.messageData = params
        }
      },
      contextRefComplete(e) {
        console.log('加载完成  ', e)
        this.showNoData = e == 0
        // 数据加载完成  隐藏loading  获取height
        this.loadIFrame()
      },
      contextNoDataHandler() {
        console.log('没有数据')
        // this.showNoData = true
        // // 数据加载完成  隐藏loading  获取height
        // this.loading = false
        // this.getHeight();
      },
    }
  };
</script>

<style lang="stylus" scoped>
  .main /deep/ {
    .el-loading-spinner .path {
      stroke: #11427D;
    }

    .frWarp {
      position: relative;
    }
    .showNoData {
      position: absolute;
      text-align center
      top 40px;
      left 50%;
    }
  }
</style>
